<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>fasty</title>

    <script src="fasty.js"></script>

<body>

</body>
</head>

<body>
<script>

    // var testhtml = "a";
    // var testhtml = "{{~ for(item of array)}} xxx {{~end}}";
    // var testhtml = "{{~ for(item of array)}} xxx  {{~ for (newItem of item.xxx)}} xxxx  {{~end}} {{~end}}";
    // var testhtml = "{{~ for(item of array)}} xxx  {{~ for (newItem of item1.xxx)}} xxxx  {{~end}} {{~end}}";
    // var testhtml = "{{~ for(var x=0;x<100;x++)}}xxx {{~end}}";
    // var testhtml = "{{~ for(var x=0,a=title;x<title.length;x++)}}  xxx{{a}} {{~end}}";
    // var testhtml = "{{~ var aaa = \"aaa\"}}";
    // var testhtml = "{{~ var aaa = \"aaa\"}}   {{~ for ( x of aaa)}}  {{aaa}}--{{x}}--{{end1}}--end {{~end}}";
    // var testhtml = "{{~ var aaa = \"aaa\"}}   {{~ for ( x of aaa)}}  {{aaa}}--{{x}}--{{end1}}--end {{~end}} {{x}} {{aaa}} {{bbb}}";
    // var testhtml = "{{~ var aaa = \"aaa\"}}   {{~ for ( x of aaa)}}  {{aaa}}--{{x}}--{{end1}}--end  {{~for (var i=0;i< x.length;i++)}}  {{x[i]}}  {{~end}} {{~end}} {{x}} {{aaa}} {{bbb}}";
    // var testhtml = "{{~ var aaa = \"aaa\"}}   {{~ for ( x of aaa)}}  {{aaa}}--{{x}}--{{end1}}--end  {{~for (var i=0;i< x.length;i++)}}  {{x[i]}} {{aaa}} {{bbb}} {{~end}} {{~end}} {{x}} {{aaa}} {{bbb}}";
    // var testhtml = "{{~if (a == b)}} xxx {{~end}}";
    // var testhtml = "{{~ var a = \"c\"}} {{~if (a == b)}} xxx {{~end}}";
    // var testhtml = "{{~ var a = \"c\",b=\"c\"}} {{~if (a == b)}} xxx    {{~end}}{{title}}{{content}} {{sexString?(1)}} {{a?.b?.c?().d?}}";
    // var testhtml = "{{~ var a =  100}} {{~for (var i=0;i<10;i++)}} {{~ a++}} {{~end}}  {{a}}";
    // var testhtml = "{{~ var a =  100}} {{~ if (a ==50) }} aaa {{~ elseif(a == 100)}} bbbb{{~end}}";
    // var testhtml = " {{~ if (a ==50) }} aaa {{~ elseif(a == 100)}} bbbb{{~end}}";
    // var testhtml = "{{~ for (item of Object.values(title).length(aacc) )}} {{item}} {{~end}} ";
    // var testhtml = "{{~ var keys = Object.keys($data),len = title.length}} {{keys}} titlelen:{{len}} ";
    // var testhtml = "{{~ var keyLen = Object.keys($data).length}} {{~ if(keyLen == 1)}} 1 {{~ else if (keyLen == 2)}} 2 {{~elseif (keyLen == 3)}} 3 {{~end}} ";

    // var testhtml = '<div class="modal">' +
    //     '  <div class="modal-dialog modal-lg">' +
    //     '    <div class="modal-content shadow-lg">' +
    //     '      <div class="modal-header">' +
    //     '        <h5 class="modal-title">{{title}}</h5>' +
    //     '        <button type="button" class="close" data-dismiss="modal" aria-label="Close" >' +
    //     '          <span aria-hidden="true">&times;</span>' +
    //     '        </button>' +
    //     '      </div>' +
    //     '      <div class="modal-body" style="word-break: break-all">' +
    //     '        <p>{{content}}</p>' +
    //     '      </div>' +
    //     '      <div class="modal-footer">' +
    //     '        <button type="button" class="btn btn-secondary" data-dismiss="modal"> 关闭 </button>' +
    //     '      </div>' +
    //     '    </div>' +
    //     '  </div>' +
    //     '</div>';

    // var data = {"title": "title test", "content": "content test..."};
    // var fasty = new Fasty({
    //     share: {
    //         sexString: function (v) {
    //             console.log("sexString>>> invoked")
    //             return v === 0 ? '女' : '男';
    //         }
    //     },
    //     safelyAccess:false,//true
    // });


    // var testhtml = ' {{attr}} hello {{ func1(name) }} {{* "<div> hello </div>" }} --'
    // var testhtml = ' {{attr}} hello {{ func1(name) }} {{! "&lt;div&gt; hello &lt;/div&gt;"}}'
    // var data = {name: "fasty"}
    //
    // var fasty = new Fasty({
    //     //the shared template data or functions
    //     share: {
    //         attr: 'text...',
    //         func1: function (v) {
    //             return v + " kiss~~"
    //         },
    //     }
    // });



    // var testhtml = '  name:{{name}} <br />  otherName:{{otherName}} <br />  ' +
    //     '!name:{{! name}} <br />  !otherName:{{!otherName}} <br /> ' +
    //     '@name:{{@name}} <br />  @otherName:{{@otherName}}';
    //
    // // var data = {name: "<span>fasty</span>",otherName:"&lt;span&gt;otherFasty&lt;/span&gt;"}
    // var data = {name: "<span>fasty</span>",otherName:""}
    // var fasty = new Fasty();



    // var testhtml = ' {{~var x = 100}} {{~ if (x == 100)}} 100  {{~/if}}   {{~for (var i = 0;i<x;i++)}}   {{i}}  {{~/for}}';
    // var data = {name: "<span>fasty</span>",otherName:""}

    // var testhtml = '{{~if (a > 1 )}} aaa {{~end}}';
    // var testhtml = '{{~if (a > 1 && (b > 0 || c< 0))}} xxx {{~end}}';
    // var testhtml = '{{~ if(required)}} aaa {{~end}}';
    // var testhtml = '{{~for (let x of options)}} xxx --- {{x}} {{~end}}';
    // var data = {}

    // var testhtml = '{{array[10-9] + "100" }} --- {{array.length}}  --- {{(array[dataUrl.length]/2)   .    toString() }}';
    // var data = {
    //     "dataUrl" :"10",
    //     "array":[1,2,3]
    // }

    // var testhtml = '{{~ for (x of [1,2,3,dataUrl])}} --{{x.toString().length / 2}}-- {{~end}} {{(10+1+2+3) / 2}}';
    // var data = {
    //     "dataUrl" :"1asdfasdf0",
    //     "array":[1,2,3]
    // }

    // var testhtml = '<div class="form-group clearfix">  <div class="form-label-left">    <legend class="col-form-label pt-0">{{label}}</legend>  </div>  <div class="flex-auto">    {{~ for(let option of options)}}    <div class="form-check form-check-inline">      <input class="form-check-input onchange" name="{{id}}" type="radio"            {{~if (disabled)}}disabled{{~end}}            {{~ if(value == option.value )}} checked {{~end}}            data-attr="{{name}}" id="{{option.value}}-{{id}}" value="{{option.value}}" />      <label class="form-check-label" for="{{option.value}}-{{id}}">{{option.text}}</label>    </div>    {{~end}}  </div></div>';
    // var testhtml = ' {{~ for(let option of options)}}   {{~ if(option.value == "2" )}} checked {{~end}}    {{~end}}         ';
    // var data = {
    //     "dataUrl" :"1asdfasdf0",
    //     "array":[1,2,3],
    //     "options":[
    //         {text:"aa",value:"1"},
    //         {text:"aa",value:"2"},
    //     ],
    //     value:2
    // }


    // var testhtml = '{{aa}} {{ 1 + 2 + 3}} {{ 10%3 + 2}} {{array.length / 2}} {{array[1] * 10}} {{"123+123/100\'%10-" + 123}} ';
    // // var testhtml = "{{'123+123/100%10-' + 123}}";
    // var data = {
    //     "aa" :"1asdfasdf0",
    //     "array":[1,2,3]
    // }

    var testhtml = '"name = "{{~ for(var i = 0;i< " {{".length,i++) }} x {{~end}}"';
    // var testhtml = "{{'123+123/100%10-' + 123}}";
    var data = {
        "aa" :"1asdfasdf0",
        "array":[1,2,3]
    }


    // var options = ['a','b']
    var fasty = new Fasty({
        debugMode: true,
        // windowObjectEnable:true
    });

    console.log(fasty.render(testhtml, data))
    console.log(document.body.innerHTML = fasty.render(testhtml, data))
</script>

</body>

</html>
